<template>
  <el-row justify="space-between" :gutter="20">
    <!-- 左侧导航 -->
    <el-col :span="5">
      <el-affix :offset="10">
        <el-card style="max-width: 480px;">
          <template #header>Download</template>
          <el-anchor :offset="70">
            <el-anchor-link href="#asm-download">ASM by tissues</el-anchor-link>
            <el-anchor-link href="#snv2cis">Indexsnv2cis</el-anchor-link>
            <el-anchor-link href="#snv2gene">Indexsnv2gene</el-anchor-link>
            <el-anchor-link href="#snv2tf-binding">Motif affinity disruption</el-anchor-link>
            <el-anchor-link href="#snv2tf-chip">Indexsnv2gwas</el-anchor-link>
            <el-anchor-link href="#snv2disease">Indexsnv2TFBS</el-anchor-link>
          </el-anchor>
        </el-card>
      </el-affix>
    </el-col>

    <!-- 主要内容区域 -->
    <el-col :span="19">
      <!-- 添加解压缩提示 -->
      <el-alert
        title="Attention: Please use 'zstd -d filename.zst' to decompress files"
        type="info"
        :closable="false"
        show-icon
        style="margin: 10px 0 0 40px; width: 93%;"
      />
      <div class="download-container">
        <!-- ASM Download -->
        <el-card class="download-card" id="asm-download">
          <template #header>
            <div class="card-header">
              <el-icon><Download /></el-icon>
              <span class="header-text">ASM by tissues</span>
            </div>
          </template>
          <div class="card-body">
            <p class="section-desc">Download tissue-specific ASM data</p>
            <div class="download-controls">
              <el-select v-model="selectedTissue" placeholder="Select tissue" class="tissue-select">
                <el-option
                  v-for="item in tissueList"
                  :key="item.name"
                  :label="`${item.name} (${item.num})`"
                  :value="item.name"
                />
              </el-select>
              <el-button type="primary" @click="downloadTissueData" :disabled="!selectedTissue">
                <el-icon><Download /></el-icon>Download
              </el-button>
            </div>
          </div>
        </el-card>

        <!-- SNV2cis-element -->
        <el-card class="download-card" id="snv2cis">
          <template #header>
            <div class="card-header">
              <el-icon><Connection /></el-icon>
              <span class="header-text">Indexsnv2cis</span>
            </div>
          </template>
          <div class="card-body">
            <p class="section-desc">Download SNV to cis-element mapping data</p>
            <div class="download-grid">
              <el-button v-for="file in cisElementFiles" :key="file.name" @click="downloadFile(file.path)">
                <el-icon><Download /></el-icon>{{ file.name }}
              </el-button>
            </div>
          </div>
        </el-card>

        <!-- SNV2gene -->
        <el-card class="download-card" id="snv2gene">
          <template #header>
            <div class="card-header">
              <el-icon><Cpu /></el-icon>
              <span class="header-text">Indexsnv2gene</span>
            </div>
          </template>
          <div class="card-body">
            <p class="section-desc">Download SNV to gene mapping data</p>
            <div class="download-grid">
              <el-button v-for="file in snv2geneFiles" :key="file.name" @click="downloadFile(file.path)">
                <el-icon><Download /></el-icon>{{ file.name }}
              </el-button>
            </div>
          </div>
        </el-card>

        <!-- SNV2TF by binding affinity -->
        <el-card class="download-card" id="snv2tf-binding">
          <template #header>
            <div class="card-header">
              <el-icon><Share /></el-icon>
              <span class="header-text">Motif affinity disruption</span>
            </div>
          </template>
          <div class="card-body">
            <p class="section-desc">Download SNV to transcription factor mapping data based on binding affinity variation</p>
            <div class="download-grid">
              <el-button v-for="file in bindingAffinityFiles" :key="file.name" @click="downloadFile(file.path)">
                <el-icon><Download /></el-icon>{{ file.name }}
              </el-button>
            </div>
          </div>
        </el-card>

        <!-- SNV2TF by ChIP-seq -->
        <el-card class="download-card" id="snv2tf-chip">
          <template #header>
            <div class="card-header">
              <el-icon><DataAnalysis /></el-icon>
              <span class="header-text">Indexsnv2gwas</span>
            </div>
          </template>
          <div class="card-body">
            <p class="section-desc">Download SNV to transcription factor mapping data based on ChIP-seq</p>
            <el-button @click="downloadFile('Indexsnv2gwas.txt')">
              <el-icon><Download /></el-icon>Indexsnv2gwas.txt
            </el-button>
          </div>
        </el-card>

        <!-- SNV2disease -->
        <el-card class="download-card" id="snv2disease">
          <template #header>
            <div class="card-header">
              <el-icon><FirstAidKit /></el-icon>
              <span class="header-text">Indexsnv2TFBS</span>
            </div>
          </template>
          <div class="card-body">
            <p class="section-desc">Download SNV to disease association data</p>
            <el-button @click="downloadFile('Indexsnv2TFBS.txt.zst')">
              <el-icon><Download /></el-icon>Indexsnv2TFBS.txt.zst
            </el-button>
          </div>
        </el-card>
      </div>
    </el-col>
  </el-row>
</template>

<script setup name="download_page">
import { ref } from 'vue'
import { Document, Download, Connection, Cpu, DataAnalysis, Share, FirstAidKit } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const selectedTissue = ref('')

const tissueList = [
  {name:'Bladder',num:'3612'},
  {name:'Blood',num:'1054001'},
  {name:'Bone marrow',num:'149270'},
  {name:'Brain',num:'1543643'},
  {name:'Breast',num:'668897'},
  {name:'Breast  cancer pdx model',num:'2107'},
  {name:'Cartilage',num:'51526'},
  {name:'Cervix',num:'182754'},
  {name:'Esophagus',num:'93416'},
  {name:'Gastric',num:'17037'},
  {name:'Intestine',num:'475884'},
  {name:'Kidney',num:'936023'},
  {name:'Liver',num:'220346'},
  {name:'Lung',num:'649222'},
  {name:'Lymph  node',num:'165143'},
  {name:'Nasopharynx',num:'30279'},
  {name:'Nipple  aspirate fluid',num:'10'},
  {name:'Oral  ',num:'163030'},
  {name:'Ovary',num:'1083094'},
  {name:'Pancreas',num:'75069'},
  {name:'PDX model colorectal cancer ',num:'1871'},
  {name:'PDX of prostate cancer',num:'3827'},
  {name:'Peritoneum',num:'665'},
  {name:'Plasma',num:'3490'},
  {name:'Prostate',num:'11002'},
  {name:'Retina',num:'61974'},
  {name:'Retinal organoids',num:'54777'},
  {name:'Skin',num:'10359'},
  {name:'Thyroid gland',num:'271415'},
  {name:'Xenograft cells of acute lymphoblastic leukemia',num:'11221'}
]

const cisElementFiles = [
  { name: 'Indexsnv_CGI.txt', path: 'Indexsnv2cis/Indexsnv_CGI.txt' },
  { name: 'sample_info_3D.txt', path: 'Indexsnv2cis/sample_info_3D.txt' },
  { name: 'Indexsnv_ATAC.txt.zst', path: 'Indexsnv2cis/Indexsnv_ATAC.txt.zst' },
  { name: 'Indexsnv2super_enhancer.txt.zst', path: 'Indexsnv2cis/Indexsnv2super_enhancer.txt.zst' },
  { name: 'Indexsnv_enhancer.txt.zst', path: 'Indexsnv2cis/Indexsnv_enhancer.txt.zst' },
  { name: 'Indexsnv_3D.txt.zst', path: 'Indexsnv2cis/Indexsnv_3D.txt.zst' },
  { name: 'Indexsnv_insulator.txt.zst', path: 'Indexsnv2cis/Indexsnv_insulator.txt.zst' }
]

const snv2geneFiles = [
  { name: 'eQTL.txt.zst', path: 'Indexsnv2gene/eQTL.txt.zst' },
  { name: 'CpG_target.zst', path: 'Indexsnv2gene/CpG_target.zst' },
  { name: 'Adjacent.txt', path: 'Indexsnv2gene/Adjacent.txt' },
  { name: '3D_proximal.txt', path: 'Indexsnv2gene/3D_proximal.txt' },
  { name: '3D_distal.txt.zst', path: 'Indexsnv2gene/3D_distal.txt.zst' }
]

const bindingAffinityFiles = [
  { name: 'jaspar_core_sig.txt.zst', path: 'Motif_affinity_disruption/jaspar_core_sig.txt.zst' },
  { name: 'jaspar_pre_sig.txt.zst', path: 'Motif_affinity_disruption/jaspar_pre_sig.txt.zst' },
  { name: 'hocomoco_rsnp_sig.txt.zst', path: 'Motif_affinity_disruption/hocomoco_rsnp_sig.txt.zst' },
  { name: 'hocomoco_invivo_sig.txt.zst', path: 'Motif_affinity_disruption/hocomoco_invivo_sig.txt.zst' },
  { name: 'hocomoco_invitro_sig.txt.zst', path: 'Motif_affinity_disruption/hocomoco_invitro_sig.txt.zst' },
  { name: 'hocomoco_core_sig.txt.zst', path: 'Motif_affinity_disruption/hocomoco_core_sig.txt.zst' }
]

const downloadTissueData =async () => {
  if (!selectedTissue.value) {
    ElMessage.warning('Please select a tissue first')
    return
  }
  // TODO: 实现具体的下载逻辑
  const apiUrl = `https://bioinfor.nefu.edu.cn/asm/download/snv_cpg?tissue=${selectedTissue.value}&&sampleType=${null}`
  // 创建一个隐藏的a标签来触发下载
  const link = document.createElement('a')
  link.href = apiUrl
  link.setAttribute('download', selectedTissue.value+".csv") // 提取文件名
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
  ElMessage.success(`Downloading data for ${selectedTissue.value}`)
}

const downloadFile = (filePath) => {
  // 调用后端API下载文件
  const apiUrl = `https://bioinfor.nefu.edu.cn/asm/download/file?filePath=${encodeURIComponent(filePath)}`
  
  // 创建一个隐藏的a标签来触发下载
  const link = document.createElement('a')
  link.href = apiUrl
  link.setAttribute('download', filePath.split('/').pop()) // 提取文件名
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
  
  ElMessage.success(`正在下载 ${filePath.split('/').pop()}`)
}

// 下载页面导航列表
const downloadList = [
  { name: 'ASM Download by Tissue', id: '#asm-download' },
  { name: 'SNV2cis-element Download', id: '#snv2cis' },
  { name: 'SNV2gene Download', id: '#snv2gene' },
  { name: 'SNV2TF by ChIP-seq Download', id: '#snv2tf-chip' },
  { name: 'SNV2TF by Binding Affinity', id: '#snv2tf-binding' },
  { name: 'SNV2disease Download', id: '#snv2disease' }
]
</script>

<style scoped>
/* 整体布局样式 */
.el-row {
  margin: 0 !important;
  height: 100%;
  min-height: calc(100vh - 60px); /* 减去顶部导航栏的高度 */
}

/* 左侧导航样式 */
.el-col:first-child {
  /* background-color: #f5f7fa; */
  text-align: left;
  padding: 20px;
  border-right: 1px solid #e6e6e6;
}

::v-deep .el-card {
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
}

::v-deep .el-card__header {
  background-color: #2185d0;
  color: #ffffff;
  padding: 15px 20px;
  font-size: 18px;
  font-weight: 600;
}

::v-deep .el-anchor__link {
  font-size: 15px;
  padding: 8px 15px;
  color: #606266;
  transition: all 0.3s;
  border-radius: 4px;
  margin: 2px 0;
}

::v-deep .el-anchor__link:hover {
  background-color: #ecf5ff;
  color: #409EFF;
}

::v-deep .el-anchor__link.is-active {
  color: #ffffff;
  background-color: #409EFF;
  font-weight: 500;
}

/* 主内容区样式 */
.download-container {
  padding: 20px 40px;
}

.download-card {
  margin-bottom: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
  transition: all 0.3s;
}

.download-card:hover {
  box-shadow: 0 4px 20px 0 rgba(0,0,0,0.08);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-text {
  font-size: 16px;
  font-weight: 600;
}

.card-body {
  padding: 25px;
  background-color: #ffffff;
}

.section-desc {
  color: #606266;
  margin-bottom: 25px;
  font-size: 14px;
  line-height: 1.6;
}

/* 下载按钮和控件样式 */
.download-controls {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 10px;
}

.tissue-select {
  width: 300px;
}

.download-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.el-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  transition: all 0.3s;
}

.el-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 响应式调整 */
@media screen and (max-width: 1200px) {
  .download-container {
    padding: 20px;
  }
  
  .download-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

@media screen and (max-width: 768px) {
  .el-col:first-child {
    display: none; /* 在小屏幕上隐藏左侧导航 */
  }
  
  .el-col:last-child {
    width: 100%;
  }
  
  .download-container {
    padding: 10px;
  }
  
  .tissue-select {
    width: 100%;
  }
  
  .download-controls {
    flex-direction: column;
    align-items: stretch;
  }
}
</style>
